<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="垃圾来源单位类型：">
              <el-select v-model="form.valueCompanyType" placeholder="请选择">
                <el-option
                  v-for="item in selectCompanyType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="垃圾来源所属区域：">
              <el-select v-model="form.company3" placeholder="请选择">
                <el-option
                  v-for="item in selectCompany"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>-->
            <el-form-item label="垃　圾　类　型　：">
              <el-select v-model="form.valueType" placeholder="请选择">
                <el-option
                  v-for="item in selectType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-radio v-model="form.radioData" label="日">按日期：</el-radio>
              <el-date-picker v-model="form.valueDay" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-radio v-model="form.radioData" label="月">按月份：</el-radio>
              <el-date-picker v-model="form.valueMonth" type="month" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" v-if="isShowSelectCLZ">
          <el-form ref="form" :model="form">
            <el-form-item label="处 理 站　：">
              <el-select v-model="form.valueType" placeholder="请选择">
                <el-option
                  v-for="item in selectCLZ"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float:left">
            <el-button size="mini" type="primary" @click="getlistdata">查 询</el-button>
            <el-button size="mini" type="success" @click="exportExcel">导 出</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
      <el-table-column prop="VehicleName" label="车辆名称" align="center"></el-table-column>
      <el-table-column prop="Trips" label="运输总趟次（趟）" align="center"></el-table-column>
      <el-table-column prop="Tonnages" label="运输总吨数（吨）" align="center"></el-table-column>
      <el-table-column prop="RubbishUnit" label="垃圾来源类型"></el-table-column>
      <el-table-column prop="RubbishType" label="垃圾类型"></el-table-column>
      <el-table-column label="操作" width="100">  
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog :title="dialogDetailModel.VehicleName" :visible.sync="dialogDetail" width="49%" class="dialogchild">
        <el-form class="dialogform">
          <table style="width:100%;text-align:center;border-collapse:collapse" class="tables">
            <tbody>
              <tr style="height:50px;">
                <th>车辆名称</th>
                <th>称重时间</th>
                <th>称重（kg）</th>
                <th>垃圾来源类型</th>
                <th>垃圾类型</th>
              </tr>
              <tr style="height:40px;" v-for="item in listDataDistrictDetail" :key="item.VehicleName">
                <td>{{item.VehicleName}}</td>
                <td>{{item.WeightTime}}</td>
                <td>{{item.Tonnages}}</td>
                <td>{{dialogDetailModel.RubbishUnit}}</td>
                <td>{{dialogDetailModel.RubbishType}}</td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      selectCompanyType: [{
        value: '',
        label: '全部'
      }, {
        value: '3',
        label: '大中型餐饮单位'
      }, {
        value: '2',
        label: '沿街小型商铺'
      }, {
        value: '1',
        label: '小区'
      }],
      selectType: [{
        value: '',
        label: '全部'
      }, {
        value: '泔水',
        label: '泔水'
      }, {
        value: '废油脂',
        label: '废油脂'
      }],
      isShowSelectCLZ: localStorage.getItem('LOGIN_NAME') === 'yanshiclz',
      selectCLZ: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '处理站1'
       }, {
        value: '2',
        label: '处理站2'
         }, {
        value: '3',
        label: '处理站3'
         }, {
        value: '4',
        label: '处理站4'
         }, {
        value: '5',
        label: '处理站5'
      }],
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      form: {
        radioData: '日',
        valueDay: '',
        valueMonth: '',
        valueCompanyType: '',
        valueType: ''
      },
      tableData: [],
      dialogDetailModel: '',
      dialogDetail: false,
      listDataDistrictDetail: []
    }
  },
  created () {
    this.form.valueDay = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
    this.form.valueMonth = formatDate(new Date(), 'yyyy-MM')
    this.getlistdata();
  },
  methods: {
    async getlistdata () {
      var date = ''
      if (this.form.radioData === '日') {
        date = this.form.valueDay
      }
      if (this.form.radioData === '月') {
        date = this.form.valueMonth
      }
      var workType = '0'
      if (this.form.valueCompanyType) {
        workType = this.form.valueCompanyType
      }
      // var url = '/DataListCompany/GetTonnagesBHApi?Date=2020-12-19&&ClientNo=00000&&Type=泔水'
      var url = 'DataListCompany/GetTonnagesBHApi?Date=' + date + '&ClientNo=' + localStorage.getItem('CLIENT_NO') + '&Type=' + this.form.valueType + '&WorkType=' + workType
      console.log('url=' + url)
      const { data } = await this.$Http.get(url)
      this.tableData = data.Tonnages
    },
    // 导出Excel
    exportExcel () {
      let excelName = '车辆吨位统计'
      var tHeader = ['车辆名称', '运输总趟次（趟）', '运输总吨数（吨）', '垃圾来源类型', '垃圾类型']
      var filterVal = ['VehicleName', 'Trips', 'Tonnages', 'RubbishUnit', 'RubbishType']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    async handleEdit (index, row) {
      this.dialogDetailModel = row
      var date = ''
      if (this.form.radioData === '日') {
        date = this.form.valueDay
      }
      if (this.form.radioData === '月') {
        date = this.form.valueMonth
      }
      var workType = '0'
      if (this.form.valueCompanyType) {
        workType = this.form.valueCompanyType
      }
      // var url = '/DataListCompany/GetWeightByCphApi?Date=' + date + '&&ClientNo=' + this.form.company2 + '&&Type=' + this.form.type2 + '&&VehicleNo=' + carName
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetWeightByCphApi?Date=' + date + '&ClientNo=' + localStorage.getItem('CLIENT_NO') + '&Type=' + this.form.valueType + '&WorkType=' + workType + '&VehicleNo=' + this.dialogDetailModel.VehicleName
      console.log('url=' + url)
      const { data } = await this.$Http.get(url)
      this.listDataDistrictDetail = data
      this.dialogDetail = true
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
/* 弹出框 */
.el-dialog {
  background: #ccd8e7;
  padding: 0px 10px;
}
.el-dialog__title {
  color: #15428b;
  font-size: 16px;
  font-weight: 600;
}
.el-dialog__body {
  background: #dfe8f6;
  border: 1px solid #99bbe8;
}
.el-dialog__footer {
  padding: 10px 0px;
}
</style>